<template>
  <div class="set-wrapper">
    <div class="header">
      <div class="return" @click="returnMethod"></div>
      <span>设备配置</span>
      <span class="edit" @click="save" v-if="isEdit">保存</span>
      <span class="edit" @click="edit" v-else>编辑</span>
    </div>
    <div class="config-wrapper">
      <div class="cell-header">
        <div class="cell-value"><b>配置信息</b></div>
        <div class="cell-value"><b>配置值</b></div>
        <div class="cell-value"><b>默认值</b></div>
      </div>
      <div>
      <div class="cell-content" v-for="(item,index) in inItems">
        <div class="cell-txt">(内)风速{{ item.level }}档</div>
        <div class="cell-txt">
          <span v-if="!isEdit">{{ item.speed }}</span>
          <input v-else v-model="item.speed" style="width:50px;"/> RPM
        </div>
        <div class="cell-txt"></div>
      </div>
      <div class="cell-content" v-for="(item,index) in outItems">
        <div class="cell-txt">(外)风速{{ item.level }}档</div>
        <div class="cell-txt">
          <span v-if="!isEdit">{{ item.speed }}</span>
          <input v-else v-model="item.speed" style="width:50px;"/> RPM
        </div>
        <div class="cell-txt"></div>
      </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { Loading } from 'vue-ydui/dist/lib.rem/dialog';
import myUrl  from 'common/js/api'
import Vue from 'vue'

export default {
  data () {
    return {
     inItems:[],
     outItems:[],
     isEdit:false
    }
  },
  created(){
    Loading.open('很快加载好了');
    setTimeout(() => {
      Loading.close();
    }, 300);
  },
  computed: {
  },
  watch: {
  },
  mounted(){
    this.getConfigInfo()
  },
  methods:{
    returnMethod(){
      this.$router.back(-1);
    },
    getConfigInfo(){
      Loading.open('很快加载好了'); 
      this.$http.post(myUrl.getSpeedConfig + '?deviceId='+this.$route.query.deviceId).then(res => {
        if(res.code === 200){
          Loading.close();  
          this.inItems = res.data.inItems;
          this.outItems = res.data.outItems;
        }
      })
      .catch(error =>{
        Loading.close();  
      })
    },
    save(){
      Loading.open('很快加载好了'); 
      let data = {};
      data.deviceId = this.$route.query.deviceId;
      data.inSpeed = [];
      this.inItems.forEach(v => {
        data.inSpeed.push(v.speed);
      })
      data.outSpeed = [];
      this.outItems.forEach(v => {
        data.outSpeed.push(v.speed);
      })
      this.$http.post(myUrl.setSpeedConfig,data).then(res => {
        if(res.code === 200){
          this.isEdit = false;
          Loading.close();  
          this.getConfigInfo();
          Toast({
              mes: '设置成功',
              timeout: 1500,
              icon: 'success'
          });
        }
      })
      .catch(error =>{
        Loading.close();  
      })
    },
    edit(){
      this.isEdit = true;
      console.log(this.inItems)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/common/scss/variable.scss";
  @import "src/common/scss/mixins.scss";
  .set-wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    .header{
      height: 40px;
      font-size: 16px;
      line-height: 40px;
      text-align: center;
      position: relative;
      .return{
        position: absolute;
        left:0px;
        background: url('../../assets/arr-left.png') no-repeat center center;
        background-size: 8px 16px;
        width: 40px;
        height: 40px;
        display: block;
        top:0px;
      }
      .edit{
        position: absolute;
        right:15px;
      }
    }
    .config-wrapper{
      position: absolute;
      top:40px;
      bottom: 0px;
      height: auto;
      background: #ffffff;
      left:0;
      width: 100%;
      padding-left: 15px;
        padding-right: 15px;
      .cell-header{
        display: flex;
        border-bottom:1px solid #d9d9d9;
        padding-left: 10px;
        .cell-value{
          flex: 1;
          text-align: left;
          font-size:16px;
          line-height: 40px;
          color: #1fb1fb;
        }
      }
      .cell-content{
        display: flex;
        border-bottom:1px solid #d9d9d9;
        .cell-txt{
          flex: 1;
          text-align: left;
          font-size:12px;
          line-height: 30px;
          padding-left: 10px;
          border-right:1px solid #d9d9d9;
          &:last-child{
            border-right:none;
          }
        }
        &:last-child{
          border-bottom:none;
        }
      }
    }
  }
  
</style>

